<template>
	<view class="topview-back">
		<image class="left-image" :src="avatarPic"></image>
		<view class="nav-title">起航咨询</view>

		<view class="right-sechdule" @click="clickSchedlAction">
			<image class="centerimage" src="../../../static/pc_schedule.png"></image>
		</view>
		<!-- 		v-if="role == '1' || role == '2'"
 -->
		<view class="right-nav" v-if="role == '1' || role == '2'" @click="clickBackAction">
			后台管理
		</view>
		<view class="back-manage" @click="messageAction">
			<uni-badge class="uni-badge-left-margin" :text="messageNum" type="error" absolute="rightTop" size="small">
				<image class="centerimage" src="../../../static/pc_message.png"></image>
			</uni-badge>
		</view>
		<image @click="clickinfoAction" class="top-image" :src="avatarPic"></image>
		<popSelect v-model="showSortSelect" :triangle=true :popData="sortSelectdata" @tapPopup="tapPopup" :x="x" :y="y"
			placement="top-end" dynamic>
		</popSelect>
		<information v-if="showInformation" @infoClose='clickInfoClose'>
		</information>
		<orderServe v-if="showOrderServe" @orderServeClose='clickOrderServeClose'></orderServe>
		<contact v-if="showContact" :editType='editType' @contactClose='clickContactClose'></contact>
		<contact v-if="showAbout" :editType='editType' @aboutClose='clickAboutClose'></contact>

		<associateCustomer v-if="showAssociateCustomer" @associateCustomerClose='clickAssociateCustomerClose'>
		</associateCustomer>
		<pop-select v-model="showMessage" :x="messagex" :y="messagey" placement="top-end" dynamic>
			<view>
				<view class="message-top">
					<view class="message-top-message">消息</view>
					<view class="message-top-remaind">订阅提醒</view>
				</view>
				<scroll-view scroll-y="true" class="message-scroll">
					<view class="message-item" v-for="(item,index) in messageData" :key="index">
						<view style="display: flex;align-items: center;">
							<view v-if="item.status.code == '0'" class="message-red"></view>
							<view class="message-message">{{item.title}}</view>
						</view>
						<view class="message-time">
							{{item.createTime}}
						</view>
					</view>
				</scroll-view>
				<view class="message-nodata" v-if="messageData.length == 0">暂无消息</view>
				<view class="message-bottom">
					<view class="message-bottom-btn" @click="clickReadAll">全部已读</view>
				</view>
			</view>
		</pop-select>
	</view>
</template>

<script>
	import popSelect from '@/components/popSelect/popSelect.vue'
	import information from "@/packageC/PhonePC/info/information.vue"
	import orderServe from "@/packageC/PhonePC/info/orderServe.vue"
	import contact from "@/packageC/PhonePC/info/contact.vue"
	import associateCustomer from "@/packageC/PhonePC/info/associateCustomer.vue"
	let app = ''
	import verify from '@/pages/utils/verifyUtils.js'
	export default {
		props: {
			
		},
		name: 'leftSelect',
		components: {
			popSelect,
			information,
			orderServe,
			contact,
			associateCustomer
		},
		data() {
			return {
				userInfo:null,
				role: '', //当前登录角色
				roleUrl: '',
				messageNum: 0,
				showSortSelect: false,
				sortSelectdata: [{
						'title': '个人信息',
						'icon': '../../static/pc_info_info.png',
					},
					// {
					// 	'title': '绑定手机',
					// 	'icon': '../../static/pc_info_phone.png',
					// }, 
					{
						'title': '订单与服务',
						'icon': '../../static/pc_info_order.png',
					}, {
						'title': '关联客户',
						'icon': '../../static/pc_info_customer.png',
					}, {
						'title': '关于起航',
						'icon': '../../static/pc_info_about.png',
					}, {
						'title': '联系起航',
						'icon': '../../static/pc_info_contact.png',
					},
				],
				x: 0,
				y: 0,
				showInformation: false,
				showOrderServe: false,
				showContact: false, //联系我们
				showAbout: false, //关于我们
				showAssociateCustomer: false, //关联客户
				showMessage: false, //消息
				messagex: 0,
				messagey: 0,
				messageData: [],
				editType: '',
				avatarPic: getApp().globalData.baseImageUrl + '/mine_moren.png',


			}
		},
		mounted() {

		},
		methods: {
			getRole() {
				var _this = this;
				app = getApp()
				_this.role = app.globalData.role
				_this.roleUrl = _this.$roleUrl({
					tab: _this.role
				})
				this.userInfo = app.globalData.userInfo
				if (verify.isNotEmpty(this.userInfo.avatarPic)) {
					if(this.userInfo.avatarPic.indexOf('http')<0){
						let avatarPic = this.$imageUrls({
							picUrls: this.userInfo.avatarPic
						})
						this.avatarPic = avatarPic
					}else{
						this.avatarPic =  this.userInfo.avatarPic
					}
					
				}
				console.log('吃' + this.avatarPic)
				console.log('吃' + this.userInfo.avatarPic)
				 console.log('吃' + _this.role)
			},
			//个人信息
			clickinfoAction(e) {
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY
				this.showSortSelect = !this.showSortSelect
				console.log(this.x, this.y, this.value)
			},
			tapPopup(e) {
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}

				if (this.role == '') {
					this.getRole();
				}
				console.log(e)
				this.sortSelect = e.title
				if (e.title == '个人信息') {
					this.showInformation = true
				} else if (e.title == '订单与服务') {
					this.showOrderServe = true
				} else if (e.title == '联系起航') {
					this.editType = 'contact'
					this.showContact = true
				} else if (e.title == '关联客户') {
					this.showAssociateCustomer = true
				} else if (e.title == '关于起航') {
					this.editType = 'about'
					this.showAbout = true
				}

			},
			clickInfoClose() {
				this.showInformation = false
			},
			clickOrderServeClose() {
				this.showOrderServe = false
			},
			clickContactClose() {
				this.showContact = false
			},
			clickAboutClose() {
				this.showAbout = false
			},
			clickAssociateCustomerClose() {
				this.showAssociateCustomer = false
			},
			//后台管理
			clickBackAction() {
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}
				this.$emit('clickBackAction', {})
			},
			//消息
			messageAction(e) {
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}

				if (this.role == '') {
					this.getRole();
				}
				this.requestMessageData();
				this.messagex = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.messagex = res.windowWidth - 80
					}
				})

				this.messagey = e.touches[0].clientY + 4
				this.showMessage = !this.showMessage
			},
			//消息
			async requestMessageData() {
				let _this = this
				var url = `/${_this.roleUrl}/notice/list`;
				const res = await this.$myRequest({
					url: url,
					method: 'POST',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.messageData = res.data.data.list
				}
			},
			//全部已读
			async clickReadAll() {
				let _this = this
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}

				var url = `/${_this.roleUrl}/notice`;
				const res = await this.$myRequest({
					url: url,
					method: 'PUT',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestMessageData();
				}
			},
			//日程
			clickSchedlAction() {
				if (!getApp().globalData.isPhone) {
					uni.showModal({
						title: '提示',
						content: '请先绑定手机号',
						showCancel: false,
					})
					return
				}
				this.$emit('clickSchedlAction', {})
			},
			//用户信息
			async getUserInfo() {
				let _this = this
				const res = await _this.$myRequest({
					url: "/oauth/userinfo",
				})
				if (res.data.code == 200) {
					console.log(res.data.data)
					getApp().globalData.userInfo = res.data.data
					_this.userInfo = res.data.data;
				}
			},
		}

	}
</script>

<style>
	.topview-back {
		display: flex;
		height: 56px;
		border-bottom: 1px #eee solid;
		align-items: center;
		width: 100%;
		background-color: white;
	}

	.left-image {
		margin-left: 20px;
		width: 26px;
		height: 26px;
		background-color: #8ED8E9;
		border-radius: 50%;
	}

	.nav-title {
		color: #333;
		font-size: 18px;
		margin-left: 10px;
	}

	.top-image {
		margin-right: 14px;
		margin-left: 15px;
		height: 28px;
		width: 28px;
		border-radius: 50%;
		background-color: rgb(245, 245, 245);
		cursor: pointer;
	}


	.back-manage {
		margin-right: 10px;
		margin-left: 10px;
		position: relative;
		cursor: pointer;
	}

	.centerimage {
		width: 24px;
		height: 24px;
	}

	.right-sechdule {
		margin-right: 10px;
		margin-left: auto;
		cursor: pointer;
	}

	.right-nav {
		cursor: pointer;
		margin-right: 10px;
	}

	.message-top {
		height: 40px;
		width: 280px;
		display: flex
	}

	.message-nodata {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px;
	}

	.message-top-message {
		margin-left: 15px;
		margin-top: 10px;
		font-size: 14px;
		font-weight: 600;
		color: #333333;
	}

	.message-top-remaind {
		margin-right: 15px;
		margin-top: 10px;
		font-size: 12px;
		font-weight: 400;
		margin-left: auto;

		color: #2DA9C5;
	}

	.message-scroll {
		max-height: 240px;
	}

	.message-item {
		width: 260px;
		max-width: 260px;
		height: 54px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 15px;
	}

	.message-red {
		width: 4px;
		min-width: 4px;
		height: 4px;
		background: #FF6132;
		border-radius: 50%;
		margin-right: 6px;
	}

	.message-message {
		font-size: 12px;
		font-weight: 400;
		color: #333333;
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.message-time {
		font-size: 10px;
		font-weight: 400;
		color: #999999;
		margin-top: 4px;
	}

	.message-bottom {
		height: 50px;
		border-top: 1px solid #EEEEEE;
		display: flex;
		justify-content: flex-end;
	}

	.message-bottom-btn {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		width: 124px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15px;
		cursor: pointer;
	}
</style>
